<template>
    <qly-base-page title="垫付" ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="18rpx 0 0">
        <tr-card margin="0 24rpx" padding="24rpx 24rpx 1rpx" border-radius="12rpx">
            <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                       label-position="top" label-width="300rpx">
                <uni-forms-item name="account" label="垫付日期：" required>
                    <uni-datetime-picker type="date" v-model="form.date" />
                </uni-forms-item>
                <uni-forms-item name="account" label="垫付金额：" required>
                    <uni-easyinput type="digit" v-model="form.account" placeholder="请输入垫付金额"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="垫付类型：" required>
                    <up-radio-group v-model="form.type" >
                        <up-radio v-for="(item, index) in radiolist1"
                                :key="index" :label="item.label"
                                :name="item.value" >
                        </up-radio>
                    </up-radio-group>
                </uni-forms-item>
                <uni-forms-item name="account" label="上传凭证/图片：" required>
                    <qly-upload-multiple v-model="form.images"/>
                    <view class="gray-text">
                        说明：最多上传9张，单张图片大小不能超过20M
                    </view>
                </uni-forms-item>
                <uni-forms-item name="account" label="备注：">
                    <uni-easyinput type="textarea" v-model="form.account" placeholder="请输入备注"/>
                </uni-forms-item>
            
            </uni-forms>
        </tr-card>
        
        <template #footer>
            <view class="tr-btns-box">
                <view class="btn-item">
                    <up-button text="取消" size="large" plain @tap="cancel"></up-button>
                </view>
                <view class="btn-item">
                    <up-button text="确认上传" color="#5572f0" size="large"
                               @tap="qly.form.pass(submit,formRef)"></up-button>
                </view>
            </view>
        </template>
    </qly-base-page>
</template>
<script setup>

const formRef = ref()
const form = ref({
    date: '',
    account: '',
    password: '',
    images: [],
    type:""
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourPassword'),
            },
        ],
    }
}

const radiolist1 = ref([
    {
        label: '资金垫付',
        value: 1,
    },
    {
        label: '发票垫付',
        disabled: 2,
    },
]);

// 取消
const cancel = () => {
    uni.navigateBack()
}

const submit = () => {
    console.log('submit')
}
</script>
<style scoped lang="scss">
.input-box {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
}
</style>
